<template>
  <section>
    <div class="row m-bottom30">
      <div class="title">计算类型于规格</div>
      <div>
        <div class="m-bottom20">
          <el-radio-group v-model="default_cpu_type">
            <el-radio-button v-for="item in vm_config" :key="item.goods_id" :label="item.goods_id">{{ item.cpu_type_name }}</el-radio-button>
          </el-radio-group>
        </div>
        <div v-if="vm_config[default_cpu_type]">
          <el-radio-group v-model="default_cpu_ram">
            <el-radio-button v-for="item in vm_config[default_cpu_type].cpu_ram_rule" :key="item.cpu" :label="item.cpu + ':'  + item.ram">{{ item.name }}</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="row m-bottom20">
      <div class="title">系统盘</div>
      <div v-if="vm_config[default_cpu_type]">
        <el-select v-model="default_system.disk" class="short-select">
          <el-option v-for="item in vm_config[default_cpu_type].system_disk" :key="item.disk_type" :value="item" :label="item.type_name"></el-option>
        </el-select>
        <span>iops: </span>
        <el-select v-model="default_system.iops" class="short-select">
          <el-option v-for="item in default_system.disk.iops" :key="item" :value="item" :label="item"></el-option>
        </el-select>
        <el-input-number v-model="default_system.disk_size" :min="default_system.disk.min" :max="default_system.disk.max"></el-input-number>
      </div>
    </div>
    <div class="row m-bottom30">
      <div class="title">数据盘</div>
      <div v-if="vm_config[default_cpu_type]">
        <div v-for="(item, index) in attach_disk" :key="index"  class="m-bottom10">
          <el-button type="text" @click="FnDelDisk(index)">
            <i class="el-icon-remove-outline"></i>
          </el-button>
          <el-select v-model="item.disk" class="short-select">
            <el-option v-for="disk in vm_config[default_cpu_type].attach_disk" :key="disk.disk_type" :value="disk" :label="disk.type_name"></el-option>
          </el-select>
          <span>iops: </span>
          <el-select v-model="item.iops" class="short-select">
            <el-option v-for="iops in item.disk.iops" :key="iops" :value="iops" :label="iops"></el-option>
          </el-select>
          <el-input-number v-model="item.disk_size" :min="item.disk.min" :max="item.disk.max" :step="item.disk.step" @change="FnEmit('disk')"></el-input-number>
        </div>
        <el-button type="text" @click="FnAddDisk()">
          <i class="el-icon-circle-plus-outline"></i> 添加数据盘
        </el-button>
      </div>
    </div>
    <div class="row">
      <div class="title">购买数量</div>
      <div>
        <el-input-number v-model="num" :min="1" :max="10000" :step="1" @change="FnEmit()"></el-input-number>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    nodeConfig: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      vm_config: {},
      default_cpu_type: "",
      default_cpu_ram: "",
      default_system: {
        disk: {},
        iops: "",
        disk_size: 0
      },
      attach_disk: [],
      num: 1
    }
  },
  methods: {
    handleDiskType(disks) {
      let new_disks = {}
      disks.map(item => {
        if(new_disks[item.disk_type]) {
          new_disks[item.disk_type].iops.push(item.iops)
        } else {
          new_disks[item.disk_type] = {
            disk_type: item.disk_type,
            iops: [item.iops],
            max: item.max || item.disk_size,
            min: item.min || item.disk_size,
            step: item.step,
            type_name: item.type_name,
          }
        }
      })
      let new_disks_list = []
      for(let key in new_disks) {
        new_disks_list.push(new_disks[key])
      }
      return new_disks_list
    },
    FnAddDisk(type) {
      let disk = this.vm_config[this.default_cpu_type].attach_disk[0]
      this.attach_disk.push({
        disk: disk,
        iops: disk.iops[0],
        disk_size: disk.min
      })
      if(!type) {
        this.FnEmit("disk")
      }
    },
    FnDelDisk(index) {
      this.attach_disk.splice(index, 1)
      this.FnEmit("disk")
    },
    FnEmit(type) {
      this.$emit("change-node-config", {
        bill_scheme_id: this.vm_config[this.default_cpu_type].bill_scheme_id,
        cpu_ram: this.default_cpu_ram,
        system_disk: {
          disk_size: this.default_system.disk_size,
          disk_type: this.default_system.disk.disk_type
        },
        attach_disk: this.attach_disk.map(item => {
          return {
            iops: item.iops,
            disk_size: item.disk_size,
            disk_type: item.disk.disk_type
          }
        }),
        num: this.num
      }, type)
    }
  },
  watch: {
    nodeConfig(newVal) {
      this.default_cpu_type = ""
      this.default_cpu_ram = ""
      console.log("@@@@@@@@@@@@")
      if(Object.keys(newVal).length > 0) {
        newVal.map(item => {
          item.attach_disk = this.handleDiskType(item.attach_disk)
          item.system_disk = this.handleDiskType([item.system_disk])
          this.vm_config[item.goods_id] = item
        })
        setTimeout(() => this.default_cpu_type = newVal[0].goods_id) // 触发watch default_cpu_type
      }
    },
    default_cpu_type(newVal) {
      if(newVal) {
        console.log("!!!!!!!!!!!!", newVal)
        this.FnAddDisk("init")
        let cpu_ram = this.vm_config[newVal].cpu_ram_rule[0] || {}
        this.default_cpu_ram = cpu_ram.cpu + ":" + cpu_ram.ram
        this.default_system.disk = this.vm_config[newVal].system_disk[0]
        this.default_system.iops = this.default_system.disk.iops[0]
        this.default_system.disk_size = this.default_system.disk.min
        this.attach_disk = []
      }
    },
    default_cpu_ram(newVal) {
      if(newVal) {
        this.FnEmit("cpu")
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    margin-right: 20px;
    line-height: 32px;
    background: #fafafa;
  }
}
.m-bottom10 {
  margin-bottom: 10px;
}
.m-bottom20 {
  margin-bottom: 20px;
}
.m-bottom30 {
  margin-bottom: 30px;
}
.short-select {
  width: 100px;
  margin-right: 20px;
}
</style>